<template>
  <div class="apply-detail-container  car-dispatch-detail">
    <div class="applyer-info apply-input">
      <div class="v1 info-item">
        <div class="flex"> 申请人
          <van-icon name="star" size="7px" color="#CC2B2B"  class="pt5"/>
        </div>
        <van-field class="w75" input-align="right" maxlength="20" v-model="value" placeholder="请输入" />
      </div>
      <div class="v1 info-item">
        <div class="flex align"> 手机号
          <van-icon name="star" size="7px" color="#CC2B2B" class="pt5" />
        </div>
        
        <van-field class="w75"  type="number" input-align="right" maxlength="11" v-model="value" placeholder="请输入" />
      </div>
      <div class="v1 info-item" @click="carTap1">
        <div class="flex align"> 用车部门
          <van-icon name="star" size="7px" color="#CC2B2B" class="pt5" />
        </div>
        <span>{{ deptName }}</span>
        <van-icon name="arrow" />
      </div>
    </div>

    <div class="applyer-info apply-input">
      <div class="v1 info-item">
        司机 <span>司机</span>
      </div>
      <div class="v1 info-item">
        电话 <span>电话</span>
      </div>
      <div class="v1 info-item">
        车辆 <span>车辆</span>
      </div>
      <div class="v1 info-item" @click="carTap2">
        <div class="flex align"> 订单类型
          <van-icon name="star" size="7px" color="#CC2B2B" class="pt5" />
        </div>
        <span>{{ usedRangeName ? usedRangeName : "请选择" }}</span>
        <van-icon name="arrow" />
      </div>
      <div class="v1 info-item v-position" data-id="1">
        <div class="flex align"> 起点
          <van-icon name="star" size="7px" color="#CC2B2B" class="pt5" />
        </div>
        <van-field class="w75" input-align="right" v-model="value" placeholder="请输入" />
        <!-- <input class="weui-input w75" placeholder="请输入" v-model="startingPoint" /> -->
      </div>
      <div class="v1 info-item v-position" data-id="2">
        <div class="flex align"> 终点
          <van-icon name="star" size="7px" color="#CC2B2B" class="pt5" />
        </div>
        <van-field class="w75" input-align="right" v-model="value" placeholder="请输入" />
      </div>
      <div class="v1 info-item" @click="showPopup(1)">
        <div class="flex align"> 开始时间
          <van-icon name="star" size="7px" color="#CC2B2B" class="pt5" />
        </div>
        <span>{{ startTime }}</span>
        <van-icon name="clock-o" />
      </div>
      <div class="v1 info-item" @click="showPopup(2)">
        <div class="flex align"> 结束时间
          <van-icon name="star" size="7px" color="#CC2B2B" class="pt5" />
        </div>
        <span>{{ endTime }}</span>
        <van-icon name="clock-o" />
      </div>
    </div>

    <div class="applyer-info apply-input">
      <div class="v1 info-item">
        <div class="flex align"> 用车人数
          <van-icon name="star" size="7px" color="#CC2B2B" class="pt5" />
        </div>
        
        <van-field class="w75" input-align="right" v-model="value"  maxlength="2" placeholder="请输入"  type="number"/>
      </div>
      <div class="v1 info-item">
        <div class="flex align"> 实际用车人
          <van-icon name="star" size="7px" color="#CC2B2B" class="pt5" />
        </div>
        <van-field class="w75" input-align="right" v-model="value"  maxlength="20" placeholder="请输入实际用车人" />
      </div>
      <div class="v1 reason">
        <div class="flex align"> 用车事由
          <van-icon name="star" size="7px" color="#CC2B2B" class="pt5" />
        </div>
        
        <van-field class="w75" input-align="right" v-model="value" placeholder="请输入用车事由" />
        <span class="textarea-tip">{{ usedReason.length }}/50</span>
      </div>
      <div class="v1 info-item"> 备注
        <input class="weui-input w75" v-model="bz" maxlength="20" placeholder="请输入备注" />
      </div>
    </div>

    <!-- 车辆类型选择 -->
    <van-popup v-model="popShow1" position="bottom" @close="onPopClose1" @cancel="onPopClose1">
      <van-picker :columns="list1" title="请选择" show-toolbar @confirm="onConfirm1" :default-index="deptIndex" />
    </van-popup>
    <van-popup v-model="popShow2" position="bottom" @close="onPopClose2" @cancel="onPopClose2">
      <van-picker :columns="list2" title="请选择" show-toolbar @confirm="onConfirm2" />
    </van-popup>

    <!-- 选择时间 -->
    <van-popup v-model="datePickerShow" @close="onClose" position="bottom">
      <van-datetime-picker type="datetime" v-model="currentDate" title="选择日期时间" :formatter="formatter" :min-date="minDate" @confirm="confirmFn" @cancel="onClose"></van-datetime-picker>
    </van-popup>

    <button class="submit-btn" @click="submitTap" :disabled="loading">提交</button>
  </div>
</template>

<script>
import { Dialog, Icon, DatetimePicker, Popup, Rate, Picker } from 'vant';

export default {
  components: {
    'van-dialog': Dialog,
    'van-icon': Icon,
    'van-datetime-picker': DatetimePicker,
    'van-popup': Popup,
    'van-rate': Rate,
    'van-picker': Picker
  },
  data() {
    return {
      carUserName: '',
      carUserMobile: '',
      deptName: '',
      driverName: '',
      phone: '',
      licenseNumber: '',
      usedRangeName: '',
      startingPoint: '',
      dropOffPoint: '',
      startTime: '',
      endTime: '',
      passengersNumber: '',
      passengers: '',
      usedReason: '',
      bz: '',
      popShow1: false,
      popShow2: false,
      datePickerShow: false,
      currentDate: new Date(),
      minDate: new Date(),
      list1: [],
      list2: [],
      deptIndex: 0,
      loading: false
    };
  },
  methods: {
    carTap1() {
      // 处理点击事件
    },
    carTap2() {
      // 处理点击事件
    },
    showPopup(type) {
      if (type === 1) {
        this.datePickerShow = true;
      } else if (type === 2) {
        this.datePickerShow = true;
      }
    },
    onPopClose1() {
      this.popShow1 = false;
    },
    onPopClose2() {
      this.popShow2 = false;
    },
    onConfirm1(value) {
      // 处理确认事件
    },
    onConfirm2(value) {
      // 处理确认事件
    },
    confirmFn(value) {
      // 处理确认事件
    },
    onClose() {
      this.datePickerShow = false;
    },
    submitTap() {
      // 处理提交事件
    }
  }
};
</script>
<style scoped>
.van-rate__icon {
  height: unset !important;
}
.apply-detail-container {
  background-color: #f5f5f5;
  padding: 20rpx;
  min-height: 100%;
}
.w100 {
  width: 100%;
}
.applyer-info {
  height: auto;
  padding: 10rpx;
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 12rpx;
  margin-bottom: 40rpx;
}
.v1:nth-of-type(1) {
  border-bottom: 1px solid #CCCCCC;
}
.v1 {
  padding: 0 23rpx;
  font-size: 28rpx;
  min-height: 72rpx;
  line-height: 72rpx;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
}
.v1 input {
  height: 72rpx;
  line-height: 72rpx;
  font-weight: normal;
}
.v1 span {
  display: inline-block;
  width: 70%;
  font-weight: normal;
  color: #666666;
  font-size: 28rpx;
}
.v1 .w70 {
  width: 70%;
}
.v1:nth-last-of-type(1) {
  border: 0;
}
.reason {
  height: unset;
  display: block;
  position: relative;
}
.reason textarea {
  width: 92%;
  height: 100rpx;
  font-weight: normal;
  line-height: 40rpx;
}
.v1 .textarea-tip {
  width: 100%;
  text-align: right;
  color: #808080;
  font-size: 24rpx;
  line-height: 30rpx;
}
.car-main-pic {
  width: 160rpx;
  height: 140rpx;
}
.c5277E0 {
  color: #5277E0;
}
.c1CBA58 {
  color: #1CBA58;
}
.section-container {}
.section {
  padding: 30rpx;
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  border-radius: 5rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  flex-wrap: wrap;
  font-size: 24rpx;
  margin-bottom: 12rpx;
  color: #666;
}
.section .v2 {
  color: #666666;
}
.hotP {
  font-weight: bold;
  font-size: 28rpx;
  color: #333;
}
.mB25 {
  margin-bottom: 25rpx;
}
.tit {
  margin-right: 10rpx;
  display: inline-block;
  vertical-align: middle;
  width: 9rpx;
  height: 38rpx;
  background: #3669F8;
  border-radius: 2rpx;
  margin-right: 17rpx;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: info-itemansparent;
  display: none;
}
.remark {
  font-size: 30rpx;
  font-weight: bold;
}
.title {
  font-size: 32rpx;
  color: #333333;
  height: 85rpx;
  line-height: 85rpx;
  background: #F0F4FF;
  border-radius: 18rpx;
}
.right {
  width: 16rpx;
  height: 30rpx;
}
.a-name {
  width: 80rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  margin-right: 14rpx;
  text-align: left;
}
.c8 {
  color: #333;
}
.picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex {
  display: flex;
}
.alignStart {
  align-items: flex-start;
}
.justify {
  justify-content: space-between;
}
.w460 {
  width: 420rpx;
  height: 48rpx;
  line-height: 48rpx;
  padding: 10rpx 20rpx;
  background: #FFFFFF;
  border: 1px solid #AAAAAA;
  border-radius: 12rpx;
  font-size: 26rpx;
}
.approval-container {
  margin-top: 20rpx;
}
.chose-car-btn {
  width: 276rpx;
  height: 72rpx;
  background: #F3F6FE;
  border: 1px solid #3A81F5;
  border-radius: 5rpx;
  font-size: 30rpx;
  color: #7B98E9;
  margin: 20rpx auto;
  line-height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.w75 {
  width: 75%;
}
.chose-car-v {
  position: relative;
  margin-right: 20rpx;
}
.chose-car-v span {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #80b4ef;
  display: block;
  height: 40rpx;
  color: #fff;
  text-align: center;
  font-size: 18rpx;
  line-height: 40rpx;
}
.driver-head {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}
</style>
<style  scoped lang="scss">

// 申请人信息 公共样式

.reason {
  padding: 12px 0;
  margin: 0 10px;
}
.apply-input {
    width: 98%;
    border: 2px solid #dedede;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 20px;

    .info-item {
        display: flex;
        height: 26px;
        line-height: 26px;
        padding: 12px 0;
        margin: 0 10px;
        align-items: center;
        border-bottom: 1px solid #e9e9e9;

        label {
            color: #666;
            min-width: 70px;
            font-weight: 600;
            text-align: left;
            padding-left: 14px;
        }

        span {
            text-align: right;
            padding-left: 14px;
            flex: 1;
            color: #c3beb7;
        }
        // 右箭头 时钟图标
        .icon {
            text-align: right;
            margin-right: 15px;
            color: #c3beb7;
        }
    }
}

.car-dispatch-detail {
    padding: 16px;
    background-color: #f5f5f5;
    font-size: 14px;
}
.pt5 {
  padding-top: 5px;
}
</style>